<template>
    <div class="page">
        <gzg-search :config="searchConfig"
                    :showMore="false" 
                    :form="searchForm"
                    :label-width="120"
                    @search="search"></gzg-search>
        <div class="tool-wrap">     

            <div class="item">
                <div class="label">累计分成金额:</div>
                <div class="val">{{ stat_data.reward_total }}</div>
            </div>  
            <div class="item">
                <div class="label">已提现金额:</div>
                <div class="val">{{ stat_data.withdraw_total }}</div>
            </div>  
            <div class="item">
                <div class="label">未清算金额:</div>
                <div class="val">{{ stat_data.wait_settle_total }}</div>
            </div>
            <div class="item">
                <div class="label">可提现金额:</div>
                <div class="val">{{ stat_data.surplus_total }}</div>
            </div>
        </div>
        <div class="grid-wrap">
            <el-table style="width:100%;"
                              height="100%"
                              :border="true"
                              :data="listData.data">
                <el-table-column label="序号" type="index" width="60px" fixed="left"></el-table-column>
                <el-table-column label="账号名称" prop="real_name" width="150px" fixed="left"></el-table-column>
                <el-table-column label="登录账号" prop="mobile" min-width="150px"></el-table-column>
                <el-table-column label="角色类型" prop="agent_type_desc" min-width="100px"></el-table-column>

                <el-table-column label="累计分成金额" prop="reward_amount" min-width="120px"></el-table-column>
               
                <el-table-column label="已提现金额" prop="withdraw_amount" width="120px"></el-table-column>
                <el-table-column label="未清算金额" prop="wait_settle_amount" width="100px"></el-table-column>
                <el-table-column label="可提现金额" prop="surplus_amount" width="180px"></el-table-column>
                <el-table-column label="最新提现时间" prop="last_withdraw_at" width="180px"></el-table-column>
                <el-table-column label="操作" width="100px" fixed="right">
                    <template #default="props">
                        <div>
                            <el-button type="primary" v-if="props.row.button.withdraw_btn" link
                                @click="openDialog(props.row)">提现</el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="page-wrap">
            <el-pagination
                v-model:current-page="params.page"
                v-model:page-size="params.page_size"
                :page-sizes="[100, 200, 300, 400]"
                layout="total, prev, pager, next"
                :total="listData.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog v-model="show" title="申请提现" width="480px">
            <el-form
                ref="formRef"
                :model="form"
                :rules="formRules"
                :label-width="100"
            >
                <el-form-item label="提现金额:">
                    <span>{{ form.surplus_amount }}</span>
                 </el-form-item>
                 <el-form-item prop="withdraw_type" label="收款方式:">
                    <el-select v-model="form.withdraw_type" placeholder="请选择">
                        <el-option label="支付宝转账" value="1"></el-option>
                        <el-option label="银行转账" value="2"></el-option>
                    </el-select>
                 </el-form-item>
                 <el-form-item prop="bank_name" label="收款银行:" v-if="form.withdraw_type == '2'">
                    <el-input v-model="form.bank_name" placeholder="请输入"></el-input>
                 </el-form-item>
                 <el-form-item prop="bank_account" :label="form.withdraw_type == '1' ? '支付宝账号:' : '银行卡号:'">
                    <el-input v-model="form.bank_account" placeholder="请输入"></el-input>
                 </el-form-item>
                 <el-form-item prop="real_name" :label="form.withdraw_type == '1' ? '支付宝实名:' : '银行户名:'">
                    <el-input v-model="form.real_name" placeholder="请输入"></el-input>
                 </el-form-item>
                 <el-form-item prop="apply_note" label="备注:" >
                    <el-input v-model="form.apply_note" type="textarea" placeholder="请输入"></el-input>
                 </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="show = false">取 消</el-button>
                    <el-button type="primary" @click="save(formRef)">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed ,onMounted } from 'vue'
import { ElMessage, FormInstance, FormRules } from "element-plus";


import { applyWithdraw,getIncomUserList } from 'services/commission'

import { assign } from 'lodash'

const show = ref(false)

const formRef = ref<FormInstance>();

const validateRealName = (rule:any, value:any, callback:any) => {
    if (value === '') {
        if (form.withdraw_type === '1') {
            callback(new Error('请输入支付宝实名'))
        } else {
            callback(new Error('请输入银行户名'))
        }
    } else {
        callback()
    }
}

const validateBankAccount = (rule:any, value:any, callback:any) => {
    if (value === '') {
        if (form.withdraw_type === '1') {
            callback(new Error('请输入支付宝账号'))
        } else {
            callback(new Error('请输入银行卡号'))
        }
    } else {
        callback()
    }
}

const formRules = reactive<FormRules>({
    withdraw_type:[{ required:true, message:'请选择收款方式' }],
    bank_name:[{required:true, message:'请输入收款银行'}],
    real_name:[{validator:validateRealName, trigger:'blur', required:true}],
    bank_account:[{validator:validateBankAccount, trigger:'blur', required:true}]
});

const form = reactive({
    surplus_amount:'',
    withdraw_type:'2',
    bank_name:'',
    real_name:'',
    bank_account:'',
    apply_note:''
})

const searchForm = reactive({
    company_name:'',
    type:'',
    mobile:''
})

const searchConfig = reactive([{
    id:'mobile',
    label:'登录账号',
    placeholder:'请输入登录账号',
    type: 'input'
}])

const listData = reactive({
    total:0,
    data:<any>[]
})

const params = ref({
    company_name:'',
    page_size:  20,
    page:  1,
})

const stat_data = ref({
    reward_total:'',
    withdraw_total:'',
    wait_settle_total:'',
    surplus_total:''
})

const search = (searchParams:any) => {

    assign(params.value, searchParams)

    console.log(params.value)
    params.value.page = 1

    getList()
}

const handleSizeChange = (val: number) => {
    params.value.page_size = val
    params.value.page = 1
    getList();
}

const handleCurrentChange = (val:number) => {
    params.value.page = val
    getList()
} 

const getList = () => {
    getIncomUserList(params.value).then(res => {
        if (params.value.page == 1) {
            stat_data.value = res.stat_data || {
                reward_total:'0',
                withdraw_total:'0',
                wait_settle_total:'0',
                surplus_total:'0'
            }
        }
       

        listData.total = parseInt(res.total_rows)
        listData.data = res.items || []
    })
}

const openDialog = (row:any) => {
    form.surplus_amount = row.surplus_amount
    
    form.withdraw_type = '2'
    form.bank_name = ''
    form.real_name = ''
    form.bank_account = ''
    form.apply_note =''
    show.value = true
}

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            applyWithdraw(form).then(res => {
                ElMessage.success('申请成功')
                show.value = false
                getList()
            })
        } else {
            console.log('error submit', fields)
        }
    })
}

onMounted(() => {
    getList()
})
</script>